@import '../../theme/style/variables.module.less';

@ant-menu-submenu: ant-menu-submenu;

.submenu-item-title-background-default() {
    &:hover,
    &:active,
    &:visited,
    &:link {
        background-color: var(--mi-menu-item-background-default);
    }
}

.container {
    background: var(--mi-menu-background);
    .properties(padding-left, 16);
    .properties(padding-right, 16);
    .properties(padding-bottom, @mi-menu-item-height);
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    .hide-scrollbar();

    :global {
        .ant-menu-item {
            .properties(height, @mi-menu-item-height);
            .properties(line-height, @mi-menu-item-height);
            margin: 0;
            width: 100%;
            background-color: var(--mi-menu-item-background-default);
            flex-wrap: nowrap;
            white-space: nowrap;

            .ant-menu-title-content {
                width: 100%;
            }
        }

        .@{ant-menu-submenu} {
            .properties(margin-top);
            .flex(center, center, column);
            .transition();
            padding-bottom: 0;

            & .@{ant-menu-submenu}-title {
                .properties(height, @mi-menu-item-height);
                .properties(line-height, @mi-menu-item-height);
                margin: 0;
                .transition();
                width: 100%;
                .submenu-item-title-background-default();
            }

            & .@{ant-menu-submenu}-arrow {
                color: var(--mi-menu-submenu-item-title-arrow-default);
                .properties(inset-inline-end);
            }

            & .ant-menu-sub.ant-menu-inline {
                background: var(--mi-menu-background);
                width: 100%;
            }

            &.@{ant-menu-submenu}-selected.@{ant-menu-submenu}-vertical {
                .mi-menu-item-title-icon {
                    .anticon {
                        color: var(--mi-menu-collapsed-icon);
                    }
                }
            }

            &.@{ant-menu-submenu}-selected.@{ant-menu-submenu}-vertical.@{ant-menu-submenu}-open {
                .mi-menu-item-title-icon {
                    .anticon {
                        color: var(--mi-on-background);
                    }
                }
            }

            &.@{ant-menu-submenu}-selected:not(.@{ant-menu-submenu}-open) {
                .@{ant-menu-submenu}-title {
                    .gradient-hint();
                    background-color: var(--mi-menu-item-background-default);
                    .submenu-item-title-background-default();
                }

                .@{ant-menu-submenu}-arrow {
                    color: var(--mi-menu-submenu-item-title-arrow-active);
                }
            }
        }
    }
}

:global {
    .ant-menu-inline-collapsed-tooltip {
        z-index: @mi-zindex + 100;

        .ant-tooltip-content {
            .ant-tooltip-arrow {
                display: none;
            }
        }

        .ant-tooltip-inner {
            color: var(--mi-menu-collapsed-tooltip-text);
            background: var(--mi-menu-collapsed-tooltip-background);
            border: .0625rem solid var(--mi-menu-submenu-popup-border);
        }

        .mi-menu-item-title-icon {
            .anticon {
                color: var(--mi-menu-collapsed-tooltip-text) !important;
            }
        }

        .mi-menu-item-title-name {
            display: flex !important;
            .properties(margin-left, 16);
            color: var(--mi-menu-collapsed-tooltip-text) !important;

            span {
                color: var(--mi-menu-collapsed-tooltip-text) !important;
            }
        }
    }

    .ant-menu-submenu-popup {
        .ant-menu-vertical.ant-menu-sub {
            .scrollbar();
        }
    }
}

:export {
    --menu-text: var(--mi-on-background);
    --menu-background: var(--mi-background);
    --menu-collapsed-icon: var(--mi-on-primary);
    --menu-collapsed-tooltip-background: var(--mi-surface-variant);
    --menu-collapsed-tooltip-text: var(--mi-on-surface-variant);
    --menu-submenu-item-title-arrow-default: var(--mi-on-background);
    --menu-submenu-item-title-arrow-active: var(--mi-on-primary);

}